<template>
  <div v-loading="loading" class="purchase">
    <div class="app-container">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="el-icon-search" />&nbsp;搜索栏
          </template>
          <div class="head-container">
            <el-form class="searchform" :inline="true" size="mini" label-width="130px">
              <el-form-item label="6位供应商号">
                <el-input v-model="searchData.vendorNbr6List" type="textarea" placeholder="请输入6位供应商号，多个回车换行隔开" clearable style="width: 200px;" />
              </el-form-item>
              <el-form-item label="9位供应商号">
                <el-input v-model="searchData.vendorNbr9List" type="textarea" placeholder="请输入9位供应商号，多个回车换行隔开" clearable style="width: 200px;" />
              </el-form-item>
              <el-form-item label="供应商名称">
                <el-input v-model.trim="searchData.vendorName" placeholder="请输入供应商名称" clearable />
              </el-form-item>
              <el-form-item label="是否白名单供应商">
                <el-select v-model="searchData.whiteListFlag" style="width: 200px;" placeholder="请选择" clearable>
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
              <el-form-item label="是否PB供应商">
                <el-select v-model="searchData.pbVendorFlag" style="width: 200px;" placeholder="请选择" clearable>
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-search" round @click="search">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <essTable
      ref="table"
      :thead-list="theadList"
      :other-container-box="otherContainerBox"
      :page-num="searchData.pageNum -1 + 2"
      :total="total"
      :data-list="tableData"
      @search="search"
      @handleCurrentChange="pageChange"
      @handleSizeChange="sizeChange"
      @selectionChange="handleSelectionChange"
      @edit="edit"
    >
      <template v-slot:pbVendorFlag="{scope}">
        {{ scope.row.pbVendorFlag==1?'是':'否' }}
      </template>
      <template v-slot:whiteListFlag="{scope}">
        {{ scope.row.whiteListFlag==1?'是':'否' }}
      </template>
      <div slot="right" name="right">
        <el-button :disabled="!multipleSelection.length" size="mini" type="primary" round @click="batchEdit">批量修改</el-button>
      </div>
    </essTable>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="400px">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="auto">
        <el-form-item prop="whiteListFlag" label="是否白名单供应商">
          <el-select v-model="form.whiteListFlag" placeholder="请选择">
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { whiteVendorList, batchEditWhiteVendor } from '@/api/coi/onlineTaskAPI/spu'
import essTable from '@/components/eTable/eTable.vue'
import { whiteVendorTableList } from '@/views/coi/commonJs/tableHeadList'
import { stringToArray } from '@/utils/processingData'

export default {
  name: 'WhitelistVendorConfig',
  components: {
    essTable
  },
  data() {
    return {
      loading: false,
      tableData: [],
      theadList: whiteVendorTableList,
      otherContainerBox: ['.app-container'],
      total: 0,
      activeName: '1',
      searchData: {
        pageNum: 0,
        pageSize: 10
      },
      multipleSelection: [],
      form: {},
      title: '批量修改',
      rules: {
        whiteListFlag: [
          { required: true, message: '请选择是否白名单供应商', trigger: 'change' }
        ]
      },
      btnLoading: false,
      dialogFormVisible: false
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      this.$refs.table.clearSelection()
      try {
        this.loading = true
        const { result } = await whiteVendorList(this.handleData())
        if (!result) return
        this.total = result.total
        this.tableData = result.data
      } finally {
        this.loading = false
      }
    },
    // 处理请提数据
    handleData() {
      const searchData = JSON.parse(JSON.stringify(this.searchData))
      if (searchData.vendorNbr6List) { searchData.vendorNbr6List = stringToArray(searchData.vendorNbr6List, /[\n\r]/) }
      if (searchData.vendorNbr9List) { searchData.vendorNbr9List = stringToArray(searchData.vendorNbr9List, /[\n\r]/) }
      for (const key in searchData) {
        if (searchData[key] === [] || searchData[key] === '') {
          delete searchData[key]
        }
      }
      return searchData
    },
    search() {
      this.pageChange(1)
    },
    sizeChange(val) {
      this.searchData.pageSize = val
      this.pageChange(1)
    },
    pageChange(val) {
      this.searchData.pageNum = val - 1
      this.initData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    batchEdit() {
      this.title = '批量修改'
      const idList = []
      this.multipleSelection.forEach(el => {
        idList.push(el.id)
      })
      this.form = { idList: idList }
      this.dialogFormVisible = true
    },
    edit(scope) {
      this.title = '修改'
      this.form = { idList: [scope.row.id] }
      this.dialogFormVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.query()
        } else {
          return false
        }
      })
    },
    async query() {
      try {
        this.btnLoading = true
        const param = JSON.parse(JSON.stringify(this.form))
        param.whiteListFlag = this.form.whiteListFlag
        // eslint-disable-next-line no-unused-vars
        const { result } = await batchEditWhiteVendor(param)
        this.$message({
          type: 'success',
          message: '编辑成功！'
        })
        this.dialogFormVisible = false
        this.pageChange(1)
      } finally {
        this.btnLoading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.purchase{
  height: calc(100%);
}
/deep/ .el-dialog__body{
  padding: 10px 20px;
  overflow-y: auto;
  max-height: 75vh;
}
/deep/ .el-dialog__footer{
    padding: 10px 20px;
  }
</style>
